<template>


		<u-index-list :index-list="letterList" class="index-list u-page">
			<template v-for="(item, index) in goodGroupList">
				<!-- #ifdef APP-NVUE -->
				<u-index-anchor :text="letterList[index]" ></u-index-anchor>
				<!-- #endif -->
				<u-index-item>
					<!-- #ifndef APP-NVUE -->
					<u-index-anchor :text="letterList[index]" size="30" height="64" ></u-index-anchor>
					<!-- #endif -->
					<!-- <view class="list-cell" v-for="(cell, itemIndex) in item" > -->
						<!-- <view @click="showDetail(cell.goodId,item)">
							{{cell.goodName}}({{cell.goodNo}})
						</view> -->
						<u-cell-group class="list-cell" v-for="(cell, itemIndex) in item" >
							<u-cell :title="cell.nameAndNo" :isLink="true" @click="showDetail(cell.goodId)" ></u-cell>
						</u-cell-group>
				
					
					
				</u-index-item>
			</template>
		</u-index-list>

</template>

<script>
	import {listGoodWithIndex} from '@/api/good.js'
	import { computed } from "vue";

	
	export default{
		data(){
			return {
				letterList:[],
				goodGroupList:[],
				winHeight:200
			};
		},
		computed:{
			cssVars(){
				return {
					"--max-height":this.winHeights
				}
			}
		},
		onShow() {
			let that=this;
			
			uni.getSystemInfo({
				success:function(info){
					that.winHeight=info.windowHeight;
					//console.log(info.windowHeight);
				}
			});
			
		},
		onLoad() {
			
			this.loadAllGood();
		},
		methods:{
			loadAllGood(){
				let that=this;
				listGoodWithIndex().then(res=>{
					let data=res.data;
					that.letterList=data.goodFirstLetterList;
					that.goodGroupList=data.groupGoodList;
				});
			},
			showDetail(goodId,itemList){
				uni.navigateTo({
					url:"/pages/good/GoodDetail?goodId="+goodId
				})
				
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24rpx;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: rgb(248, 248, 248);
	}
	
</style>

<style lange="scss">
	.u-index-list scroll-view{
		max-height: 700px !important;
	}
</style>